<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_XHR-XHR请求的基本使用</title>
  <!-- 
  XMLHttpRequest（XHR）是JavaScript中用于与服务器进行异步交互的对象。通过XHR，开发者可以在不重新加载页面的情况下发送和接收数据。这种技术通常用于实现动态网页和单页应用（SPA）。
  XHR的基本使用
   1. 创建XHR对象

  在现代浏览器中，可以使用以下方式创建XHR对象：
  var xhr = new XMLHttpRequest();
   2. 配置请求
  使用 `open` 方法配置请求。此方法接受三个参数：请求方法（如GET或POST）、请求的URL，以及是否异步（通常为true）。
  xhr.open('GET', 'https://api.example.com/data', true);
   3. 设置请求头（可选）

  如果需要向服务器发送特定的请求头，可以使用 `setRequestHeader` 方法。例如，在发送JSON数据时，可以设置Content-Type：
  xhr.setRequestHeader('Content-Type', 'application/json');
   4. 发送请求
  使用 `send` 方法发送请求。对于GET请求，可以直接调用 `send()` ；对于POST请求，可以传递要发送的数据。
  xhr.send(); // 对于GET请求
  // 对于POST请求
  xhr.send(JSON.stringify({ key: 'value' }));
   5. 处理响应
  通过监听 `onreadystatechange` 事件或使用 `onload` 事件来处理服务器的响应。可以检查 `readyState` 和 `status` 来判断请求是否成功。
  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) { // 请求完成
          if (xhr.status === 200) { // HTTP状态码200表示成功
              console.log(xhr.responseText); // 处理响应数据
          } else {
              console.error('请求失败，状态码：' + xhr.status);
          }
      }
  };
  或者使用 `onload` ：
  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log(xhr.responseText); // 处理响应数据
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };
  总结
  - 创建XHR对象：使用 `new XMLHttpRequest()` 。
  - 配置请求：使用 `open` 方法设置请求类型、URL和异步标志。
  - 设置请求头：可选，使用 `setRequestHeader` 方法。
  - 发送请求：使用 `send` 方法。
  - 处理响应：通过 `onreadystatechange` 或 `onload` 事件处理响应数据。

  注意事项
  1. 跨域请求：如果请求的URL与当前页面的域不一致，可能会受到同源策略的限制。需要服务器支持CORS（跨域资源共享）。
  2. 错误处理：应始终处理可能的错误情况，确保用户体验良好。
  3. 现代替代方案：虽然XHR仍然被广泛使用，但现代浏览器支持Fetch API，它提供了更简洁和强大的接口来进行网络请求。对于新项目，建议使用Fetch API。
  -->
</head>
<body>

  <script>
    // 1. 创建一个XMLHttpRequest对象
    const xhr = new XMLHttpRequest()

    // 2. 监听请求状态的变化
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== XMLHttpRequest.DONE) return

      // 将字符串转成JSON对象(js对象)
      const resJSON = JSON.parse(xhr.response)
      const banners = resJSON.data.banner.list
      console.log(banners);
    }

    // 3. 配置请求信息
    xhr.open('GET', 'http://123.207.32.32:8000/home/multidata')

    // 4. 发送请求
    xhr.send()

  </script>
  
</body>
</html>